<script setup>
import CourseListItem from './CourseListItem.vue';
import router from '@/router/index.js';
const props = defineProps(['courseList'])

function itemClick(courseId,title) {
    console.log("点击了课程" + courseId + " " + title);
    router.push({name:'courseDetail',params:{courseId:courseId,title:title}});
}
</script>

<template>
    <div class="list">
        <div class="nodata" v-show="courseList.length == 0">
            <img src="../assets/nodata.png" alt="" srcset="">
            <div class="nodata-tip"> 暂无课程 </div>
        </div>
        <div class="list-item-container" v-for="(item, index) in courseList" :key="index">
            <!-- <div class="list-item-title">{{ item.title }}&nbsp;</div> -->
           <!-- <RouterLink :to="{name:'courseDetail',params:{courseId:item.id}}"> -->
            <CourseListItem :course="item" @click="itemClick(item.id , item.title)"/>
            <!-- </RouterLink> -->
            
        </div>
    </div>
</template>

<style scoped>

.list {
    padding: 0 20px 20px 20px;
    /* width: 100vw; */
}

.nodata {
    width: calc(100vw - 40px);
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nodata img {
    width: 30%;
}
.nodata .nodata-tip {
    font-size: 14px;
    color: #363636;
    margin-top: 18px;
}


.list-item-container {
    width: calc(100vw - 40px);
    margin-top: 8px;
}

</style>